<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MyHouse-公寓注册</title>
<meta name="author" content="DeathGhost" />
<link rel="stylesheet" type="text/css" href="house_css/mainstyle.css" />
 <link href="/xtiper_css/xtiper.css" rel="stylesheet" type="text/css"/>
<style>
body{height:100%;background:#16a085;overflow:hidden;}
canvas{z-index:-1;position:absolute;}
</style>
<script src="house_js/jquery.js"></script>
<script src="house_js/verificationNumbers.js"></script>
<script src="house_js/Particleground.js"></script>
 <script src="/webjars/vue/2.6.10/dist/vue.js"></script>
 <script src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
 <script src="/xtiper_js/xtiper.js"></script>
 <script src="configjs/config.js"></script>
<script>
$(document).ready(function() {
  //粒子背景特效
  $('body').particleground({
    dotColor: '#5cbdaa',
    lineColor: '#5cbdaa'
  });
});
</script>
</head>
<body>
<div id="vuebox">
<dl class="admin_login">
 <dt>
  <strong>公寓注册</strong>
  <em>House Regist System</em>
 </dt>
 <dd class="user_icon">
  <input type="text" placeholder="总管理账号" v-model="courceEntity.manager.username" class="login_txtbx"/>
 </dd>
 <dd class="pwd_icon">
  <input type="password" placeholder="总管理密码" v-model="courceEntity.manager.password" class="login_txtbx"/>
 </dd>
 <dd>
  <input type="text" placeholder="法人姓名" class="login_txtbx" v-model="courceEntity.house.frname"/>
 </dd>
 <dd>
  <input type="text" placeholder="法人身份证号" v-model="courceEntity.house.fridcard" class="login_txtbx"/>
 </dd>
 <dd>
  <input type="text" placeholder="公寓名" v-model="courceEntity.house.housename" class="login_txtbx"/>
 </dd>
 <dd>
  <input type="text" placeholder="公寓地址" v-model="courceEntity.house.houseaddr" class="login_txtbx"/>
 </dd>
 <dd class="val_icon">
  <!--  <div class="checkcode">
      <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx">
      <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
    </div>-->
  <input type="text" placeholder="手机号" v-model="courceEntity.house.frphone"  class="login_txtbx"/>
 </dd>

 <dd>
  <input id="send" type="button" value="发送短信验证码" class="ver_btn" @click="sendCode()">
 </dd>
 <dd class="val_icon">
  <input type="text" placeholder="输入接收的验证码" v-model="courceEntity.manager.code" class="login_txtbx"/>
 </dd>
 <dd class="">
  <input type="button" value="立即注册" class="submit_btn" @click="regist()"/>
 </dd>
 <dd>
  <p>© 2015-2016 DeathGhost 版权所有</p>
  <p>MyHouse公寓管理系统-注册公寓</p>
 </dd>
</dl>
</div>
</body>
</html>
<script>
 var vm=new Vue({
  el:"#vuebox",
  data:{
   courceEntity:{
    house:{
     frname:"",
     frphone:"",
     fridcard:"",
     houseaddr:"",
     housename:""
    },
    manager:{
     username:"",
     password:"",
     code:""
    }
   },
   phone:"",
   code:""
  },
  methods:{
   sendCode:function(){
    if (this.courceEntity.house.frphone.length!=11){
     xtip.msg("手机号不合法",{icon:"e"});
    }else{
     $('#send').attr("disabled","disabled");
     loadid=xtip.load("验证码发送中,请等待...");
     axios.get(link+"house/sendCode",{params:{username:this.courceEntity.manager.username,phone:this.courceEntity.house.frphone}}).then(res=>{
      if (res.data.data.result=="success"){
       $('#send').attr("value","60秒后重新发送");
       xtip.msg("验证码发送成功,注册成功或刷新页面前有效!",{icon:"s"});
       this.phone=res.data.data.phone;
       this.code=res.data.data.code;
       xtip.close(loadid);
       var num=60;
       var time=setInterval(()=>{
        if (num<=0){
         $('#send').removeAttr("disabled");
         $('#send').attr("value","发送短信验证码");
         clearInterval(time);
        }else{
         num--;
         $('#send').attr("value",num+"秒后重新发送");
        }
       },1000)

      }else{
       xtip.msg("验证码发送失败",{icon:"e"});
       xtip.close(loadid);
       $('#send').removeAttr("disabled");


      }
     })
    }

   },
   regist:function () {

   if (this.courceEntity.manager.username==''||this.courceEntity.manager.password==''||this.courceEntity.manager.code==''||this.courceEntity.house.fridcard==''||this.courceEntity.house.frphone==''||this.courceEntity.house.frname==''||this.courceEntity.house.housename==''||this.courceEntity.house.houseaddr==''){
    xtip.msg("请检查数据完整性!")

   }else{
    loadid=xtip.load("正在验证");
    if (this.courceEntity.house.fridcard.length==18){
     if (this.phone==this.courceEntity.house.frphone&&this.code==this.courceEntity.manager.code){
      xtip.close(loadid);
      loadid=xtip.load("正在注册");
      axios.post(link+"house/regist",this.courceEntity).then(res=>{
       if (res.data.data=="success"){
        xtip.close(loadid);
        xtip.msg("公寓["+this.courceEntity.house.housename+"]注册成功!欢迎加入MyHouse大家庭!稍后为您跳转登录界面",{icon:'s'});
        this.phone=="";
        this.code=="outtime";
        setTimeout(function () {
         window.location.href="house_login.html";
        },3000)
       }else{
        xtip.close(loadid);
        xtip.msg("公寓["+this.courceEntity.house.housename+"]注册失败!原因为:"+res.data.data,{icon:'e'})
       }
      })
     }else{
      if (this.code=="outtime"){
       xtip.close(loadid);
       xtip.msg("验证码已经失效,请重新获取!",{icon:"e"})
      }else{
       xtip.close(loadid);
       xtip.msg("验证码错误",{icon:"e"})
      }

     }
    }else{
     xtip.close(loadid);
     xtip.msg("身份证号码格式不合法",{icon:"e"})
    }
   }
   }
  }
 })
</script>
